﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="echarts.js"></script>
    <script src="jquery.js"></script>
</head>

<body>
    <div id="main" style="width:400px;height:170px;"></div>
    <script type="text/javascript">
    $('#main').css('height',$(window).height()-20+'px');
    $('#main').css('width',$(window).width()-20+'px');
    // alert($(window).height());
    // alert($(window).width());
    var myChart = echarts.init(document.getElementById('main'));
    $.ajax({
        url:'/x/zjabank/rst/resend?controller=charts@totalReportData',
        type:'GET',
        dataType:'json',
        cache:false
    }).done(function(data){
        var data1 = new Array();
        var data2 = new Array();
        for(var key in data){
            data1.push(key);
            data2.push({
                name:key,
                value:data[key]
            });
        }
        console.log(data1);
        console.log(data2);
        var option = {
            title: {
                text: '',
                subtext: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: data1
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: data2,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        myChart.setOption(option);
    });
    </script>
</body>

</html>
